<template>
	<view class="me">
		<topBox></topBox>
		<view class="collapse_manage">
			<u-collapse @change="collChange" ref="collapse">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="item.head" :open="item.open">
					<view class="" v-if="item.type === 'group'">
						<u-empty v-if="groupList == ''" icon-size="0"  mode="list"></u-empty>
						<view v-else v-for="gItem in groupList" :key="gItem.name">
							<view class="flex">
								<view class="">
									{{gItem.name}}
								</view>
								<u-button type='primary' size="mini" @click="addGroupMessage(gItem)">添加组员</u-button>
								<!-- <u-button shape="circle" size="mini" :custom-style="customStyle2">-</u-button> -->
								<u-button type='error' size="mini" :custom-style="customStyle"  @click="deleteGoupMes('group',gItem)">删除组</u-button>
							</view>
							<view class="flex child-wrap" v-for="mItem in gItem.members" :key="mItem.mid">
								<view class="flex">
									<u-avatar class="headImg" :src="mItem.avatarUrl" mode="square" size="60"></u-avatar>
									<view class="name" style="margin-left: 10rpx;">
										{{mItem.nickname}}
									</view>
								</view>
										<!--<view class="phone">
											13156453
										</view> -->
								<u-button type='error' size="mini" :custom-style="customStyle" @click="deleteGoupMes('mess',gItem, mItem)">移除</u-button>
							</view>
						</view>
						<u-button type='primary' size="mini" @click="(show = true, form.typeAdmin = 'nameGroup')">新建社群</u-button>
					</view>
					<view class="" v-if="item.type === 'allMessage'">
						<u-empty v-if="messageList == ''" icon-size="0"  mode="list"></u-empty>
						<view class="flex" v-else v-for="sItem in messageList" :key="sItem.id">
							<view class="flex">
								<u-avatar class="headImg" :src="sItem.avatarUrl" mode="square"></u-avatar>
								<view class="name">
									{{sItem.nickname}}
								</view>
							</view>
							<view class="phone">
								{{sItem.phone}}
							</view>
							<u-button type='error' size="mini" :custom-style="customStyle" @click="deleteGoupMes('mList', sItem)">删除</u-button>
						</view>
					</view>
					<view v-if="item.type === 'noReview'">
						<u-empty v-if="noRevide == ''" icon-size="0"  mode="list"></u-empty>
						<view v-else class="flex" v-for="vItem in noRevide" :key="vItem.nickname">
							<view class="flex">
								<u-avatar class="headImg" :src="vItem.avatarUrl" mode="square"></u-avatar>
								<view class="name">
									{{vItem.nickname}}
								</view>
							</view>
							<view class="phone">
								{{vItem.phone}}
							</view>
							<view class="flex">
								<u-button type='warning' size="mini" style="margin-right: 20rpx;" @click="reviewEvent(vItem.id,-1)">拒绝</u-button>
								<u-button type='success' size="mini" @click="reviewEvent(vItem.id,1)">通过</u-button>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<u-button type='primary' @click="(show = true, form.typeAdmin = 'addPhone')">添加额外手机号</u-button>
		<u-popup v-model="show" mode="center" width="600rpx" height="auto">
			<view class="popup" >
				<u-form ref="uForm" :model="form">
					<u-form-item label="手机号码" label-width="120upx" v-if="form.typeAdmin == 'addPhone'">
						<u-input v-model="form.phone" maxlength="11" type="text" :border="true" style="width: 400upx;" />
					</u-form-item>
					<u-form-item label="社群名称" label-width="120upx" v-if="form.typeAdmin == 'nameGroup'">
						<u-input v-model="form.name" type="text" :border="true" style="width: 400upx;" />
					</u-form-item>
					<u-form-item label="请选择组员" label-width="120upx" v-if="form.typeAdmin == 'addGroupMessage'">
						<view class="title" v-if="smllGroupItem != ''">
							<!-- <radio class='blue' :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false" value="2" @tap="changeRadio(2)"></radio> -->
							<u-checkbox v-model="allGroudId" active-color="#E04110" @change="allGroupLsit">全选</u-checkbox>
							<view class="publishList">
								<u-checkbox-group active-color="#E04110">
									<u-checkbox class="checkbox flex" v-model="item.checked" v-for="item in smllGroupItem" :key="item.id" :name="item.id">
										<view class="flex">
											<!-- <image v-if="item.headImg" class="headImg" :src="item.headImg"></image> -->
											<view>{{ item.nickname }}</view>
										</view>
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
						<u-empty v-else mode="search" icon-size="50"></u-empty>
						<!-- <u-input v-model="form.ids" type="text" :border="true" style="width: 400upx;" /> -->
					</u-form-item>
				</u-form>
				<u-button @click="submit" :custom-style="customStyle">提交</u-button>
			</view>
		</u-popup>
		<tabBar :selected="2"></tabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
	name: 'me', // 我的
	data() {
		return {
			itemList: [{
				head: "代招社群管理",
				type: 'group',
				open: false
			},{
				head: "代招管理",
				type: 'allMessage',
				open: false,
			},{
				head: "待审核通过专属代招",
				type: 'noReview',
				open: false,
			}],
			customStyle: {
				'background': '#E04110',
				'border-color': '#E04110',
				'color': '#fff'
			},
			customStyle2: {
				'background': '#E04110',
				'color': '#fff',
				'fontSize': '14px'
			},
			smllGroupItem: [],
			show: false,
			form: {
				phone: '',
				name: '', 
				gid: '',
				ids: '',
				typeAdmin: null, // addPhone, nameGroup, 
			},
			role: uni.getStorageSync('role'),
			groupList: [],
			noRevide: [],
			messageList: []
		};
	},
	components: {
		topBox,
		tabBar
	},
	computed: {
		...mapState({
			userId: state => state.userId,
			showMoney: state => state.showMoney,
		})
	},
	onShow() {
		uni.hideTabBar()
		let token = uni.getStorageSync('token');
		if(token) {
			// this.getUserInfo();
			// this.generateCode();
		}else {
			uni.redirectTo({
				url: '/pages/login'
			})
		}
	},
	onShareAppMessage(res) {
		const userInfo = uni.getStorageSync('userInfo')
		if(this.role == 'big') {
			const {id, name} = userInfo
			return {
				title: `嗨！我邀请你成为的专属代理啦`,
				imageUrl: '../../static/image/share.jpg',
				path: '/pages/share/invitation?recId=' + id + '&name=' + name
			}
		} else {
			return {
				title: `嗨！快来加入我们平台吧`,
				imageUrl: '../../static/image/share.jpg',
				path: 'pages/index/full-screen'
			}
		}
	},
	methods: {
		allGroupLsit(e) {
			this.smllGroupItem.map(item => {
				item.checked = e.value
			})
		},
		submit() {
			let requirePromise
			switch(this.form.typeAdmin) {
				case 'addPhone':
					if(!this.form.phone) return
					requirePromise = this.$u.api.postAddEditMobile({mobile: this.form.phone})
					break
				case 'nameGroup':
					if(!this.form.name) return
					requirePromise = this.$u.api.postAddGroup({name: this.form.name})
					break
				case 'addGroupMessage':
				let ids = this.smllGroupItem.reduce((total, item) => {
					if(item.checked) total.push(item.id)
					return total
				}, []).join()
				if(!this.form.gid || !ids) return
				// this.form.ids = ids.join(',')
				requirePromise = this.$u.api.addGroupMenber({gid: this.form.gid, ids})
				break
			}
			requirePromise.then(res => {
				if (res.status == true) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					switch(this.form.typeAdmin) {
						case 'addPhone':
							this.$u.api.postGetAdminInfo()
								.then(res => {
									if (res.status == true) {
										uni.setStorageSync('userInfo', res.data)
										this.$store.commit('commitUserInfo', res.data)
									}
								})
							this.form.phone = ''
							this.form.name = ''
							break
						case 'nameGroup':
							this.collChange('0')
							break
						case 'addGroupMessage':
							this.form.gid = ''
							this.form.ids = ''
							this.collChange('0')
							break
					}
					this.show = false
					this.form.typeAdmin = null
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		collChange(str) {
			console.log(str)
			switch(str) {
				case '0':
					// console.log('社群管理')
					this.getExclusiveMembers('getGroupMembers', 'group')
					break
				case '1':
					// console.log('待招管理')
					this.getExclusiveMembers('postExclusiveMembers', 'allMessage')
					break
				case '2':
					// console.log('待审核列表')
					this.getExclusiveMembers('postGetNotReviewed', 'noReview')
					break
			}
		},
		// 获取代招列表
		getExclusiveMembers(name, type) {
			const promise = this.$u.api[name]()
			promise.then(res => {
				if (res.status == true) { 
					if(type == 'group') {
						this.groupList = res.data
					} else if(type == 'noReview') {
						this.noRevide = res.data
					} else if(type == 'allMessage') {
						this.messageList = res.data
					}
					this.$nextTick(() => {
						this.$refs.collapse.init()
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		reviewEvent(id, agree) {
			this.$u.api.postBigReview({id, agree}).then(res => {
				if (res.status == true) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.collChange('2')
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		//  添加组员
		addGroupMessage(gItem, ids) {
			this.$u.api.getUngroupedMembers().then(res => {
				if(res.status) {
					this.smllGroupItem = res.data.reduce((total,item )=> {
						total.push({...item, checked: false})
						return total
					}, [])
				} else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
			this.form.gid = gItem.gid
			this.form.typeAdmin = 'addGroupMessage'
			this.show = true
		},
		// 删除组员
		deleteGoupMes(type,gItem,mItem) {
			let text, promise, func
			switch(type) {
				case 'group':
					text = '确定要删除这个群组吗'
					promise = this.$u.api.delGroup.bind(null,{gid: gItem.gid})
					func = this.collChange.bind(null,'0')
					break
				case 'mess':
					text = '确定要移除这个组成员吗'
					promise = this.$u.api.delGroupMembers.bind(null,{gid: gItem.gid, ids: mItem.mid})
					func = this.collChange.bind(null,'0')
					break
				case 'mList':
					text = '确定要删除这个专属代理吗'
					promise = this.$u.api.delExclusiveMembers.bind(null,{id: gItem.id})
					func = this.collChange.bind(null,'1')
			}
			uni.showModal({
				title: '提示',
				content: text,
				success: e => {
					if(e.confirm) {
						promise().then(res => {
							if (res.status == true) {
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								func()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.me{
		// padding-top: 106upx;
	}
	.collapse_manage{
		margin: 0 40upx;
		padding: 0 20upx;
		margin-bottom: 40rpx;
		background-color: #FFFFFF;
	}
	.flex{
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
	}
	.popup{
		margin: 20upx;
	}
	
	// .publish-choice{
	// 	padding: 0 60upx;
		.publishList{
			// margin: 30upx;
			padding: 20upx;
			border: 1px solid #666;
		}
		.flex{
			margin: 10upx 0;
			align-items: center;
			.headImg{
				width: 60upx;
				height: 60upx;
				border-radius: 100upx;
				margin: 0 10upx;
			}
			view{
				margin: 0 10upx;
			}
		}
	// }
</style>
